<template>
  <div class="container">
    <div class="header">
      <h1>
        学生管理
        <a-tooltip>
          <template slot="title">
            上传excel文件，向系统中导入学生列表
          </template>
          <span class="title-op" @click="uploadFileShow=true">学生导入</span>
        </a-tooltip>
      </h1>
    </div>
    <div class="content">
      <a-row>
        <a-col span="10" style="text-align: center">
          <a-cascader style="width: 70%; text-align: left" :options="colleges" placeholder="学院/专业/班级"
                      @change="changeCollege"></a-cascader>
        </a-col>
        <a-col span="4" style="text-align: center">
          <span>年级：</span>
          <a-select :default-value="-1" @change="changeGrade">
            <a-select-option v-for="(grade, index) in grades" :key="index" :value="grade.id">
              {{ grade.text }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col span="6" style="text-align: center">
          <a-tooltip>
            <template slot="title">
              <span>条件为空时默认查询所有学生</span>
            </template>
            <a-button type="primary" @click="loadStudents">查询</a-button>
          </a-tooltip>
        </a-col>
        <a-col span="4">
          <a-input-search @search="searchStudents" placeholder="搜索学生"></a-input-search>
        </a-col>
      </a-row>
      <br>
      <br>
      <a-table :pagination="false" bordered :columns="studentsColumns" :data-source="students">
        <span slot="action" slot-scope="record">
          <a-popconfirm
              :title="'确定重置'+record.studentNumber+'密码？'"
              ok-text="确定"
              cancel-text="取消"
              @confirm="showResetPassword(record.studentNumber)"
          >
            <a href="#">重置密码</a>
          </a-popconfirm>
        </span>
      </a-table>
      <div class="pagination">
        <a-pagination
            show-size-changer
            :total="total"
            @showSizeChange="pageSizeChange"
            @change="changePage"
        ></a-pagination>
      </div>
    </div>
    <a-modal
        :visible="resetPasswordShow"
        :confirm-loading="confirmLoading"
        @ok="resetPassword"
        @cancel="resetPasswordShow=false"
        :width="300"
        centered
        title="请输入密码确认身份"
    >
      <a-input-password v-model="adminPassword"/>
    </a-modal>
    <a-modal
        :visible="uploadFileShow"
        @cancel="uploadFileShow=false"
        :closable="false"
        @ok="loadStudentsList"
        :confirm-loading="confirmLoading"
    >
      <a-upload-dragger
          accept=".xls, .xlsx"
          name="students"
          :multiple="true"
          action="/api/files"
          :headers="headers"
          @change="fileChange"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox"/>
        </p>
        <p class="ant-upload-text">
          单击或拖动文件到该区域进行上传
        </p>
        <p class="ant-upload-hint">
          只能上传excel文件
        </p>
      </a-upload-dragger>
    </a-modal>
  </div>
</template>

<script>
import collegeInfo from "@/api/users/collegeInfo";
import getStudents from "@/api/schoolAdmin/students";
import {resetPassword} from "@/api/users/password";
import loadStudents from "@/api/schoolAdmin/loadStudents";
import {columns} from "@/pages/schoolAdmin/js/studentColumns";

export default {
  data() {
    return {
      uploadFileShow: false,
      studentsColumns: [],
      students: [],
      college: undefined,
      major: undefined,
      class: undefined,
      grade: undefined,
      total: 200,
      page: 1,
      size: 10,
      colleges: [],
      grades: false,
      resetPasswordShow: false,
      confirmLoading: false,
      adminPassword: "",
      resetUserId: "",
      headers: {
        Authorization: localStorage.getItem("Authorization")
      },
      fileList: [],
    }
  },
  methods: {
    showResetPassword(userId) {
      this.resetPasswordShow = true;
      this.resetUserId = userId;
      this.adminPassword = "";
    },
    searchStudents(keyword) {
      if (!keyword) {
        this.$message.error("请输入关键字");
        return;
      }
      this.loadStudents("search", keyword);
    },
    changeCollege(data) {
      // 此处data是一个list，依次为选中的college、major、class
      this.college = data[0];
      this.major = data[1];
      this.class = data[2];
    },
    changeGrade(grade) {
      if (grade === -1) {
        this.grade = undefined;
      } else {
        this.grade = grade;
      }
    },
    pageSizeChange(current, pageSize) {
      this.size = pageSize;
    },
    changePage(page, pageSize) {
      this.page = page;
      this.size = pageSize;
    },
    loadCollegeInfo() {
      let self = this;
      collegeInfo().then(res => {
        if (res.result) {
          self.colleges = res.colleges;
          self.grades = res.grades;
          self.grades.push({
            id: -1,
            text: "全部"
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    loadStudents(type, keyword) {
      // 默认type为get
      type = type === "search" ? type : "get";
      let self = this;
      getStudents(this.page, this.size, type, this.college, this.major, this.class, keyword)
          .then(res => {
            if (res.result) {
              self.students = res.students;
              self.total = res.total;
            } else {
              this.$message.error(res.msg);
            }
          })
    },
    resetPassword() {
      if (!this.adminPassword) {
        this.$message.error("请输入密码");
        return;
      }
      this.confirmLoading = true;
      resetPassword(this.resetUserId, this.adminPassword)
          .then(res => {
            // 关闭对话框
            this.resetPasswordShow = false;
            this.confirmLoading = false;
            this.adminPassword = "";
            this.confirmLoading = false;
            if (res.result) {
              this.$message.success("重置密码成功");
            } else {
              this.$message.error(res.msg);
            }
          });
    },
    fileChange(info) {
      this.fileList = [];
      if (info.file.status === "done") {
        for (let file of info.fileList) {
          this.fileList.push(file.response.path);
        }
      }
    },
    loadStudentsList() {
      if (this.fileList.length === 0) {
        this.$message.error("文件列表为空");
        return;
      }
      // 导入学生列表
      this.confirmLoading = true;
      loadStudents(this.fileList).then(res => {
        this.confirmLoading = false;
        this.uploadFileShow = false;
        if (res.result) {
          this.$message.success("导入成功");
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  },
  mounted() {
    this.loadCollegeInfo();
    this.loadStudents();
    this.studentsColumns = columns.studentsColumns;
  }
};
</script>

<style scoped src="./css/common.css"></style>
<style scoped src="./css/studentManagement.css"></style>
